<template>
  <div class='directorys'>
    <el-card class="box-card">
      <!-- 目录名称 -->
      <el-row>
        <el-col :span="18">
          <el-form :inline="true" ref="form" label-width="80px">
            <el-form-item label="目录名称">
              <el-input v-model="queryData.directoryName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryData.state" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearClick">清除</el-button>
              <el-button @click="getDirectorys" type="primary">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-button @click="addDirectory" type="success" icon="el-icon-edit" class="dir_right">新增目录</el-button>
        </el-col>
      </el-row>
      <el-alert
        :closable="false"
        type="info"
        show-icon
        style="margin-bottom: 15px;">
        <template slot="title">
          数据一共 {{total}} 条
        </template>
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="directoryList"
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="80px">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科">
        </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量">
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="isStart(scope.row)" v-if="scope.row.state===0" type="text">启用</el-button>
            <el-button @click="isStart(scope.row)" v-else type="text">禁用</el-button>
            <el-button @click="editDirectory(scope.row)" type="text" :disabled="scope.row.state===1?true:false">修改</el-button>
            <el-button @click="deleteDirectory(scope.row)" type="text" :disabled="scope.row.state===1?true:false">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryData.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
      <!-- 修改对话框 -->
      <el-dialog
        title="修改目录"
        :visible.sync="editDialogVisible"
        width="400px">
        <el-form ref="form" :rules="editRules" :model="editDirectoryInfo" label-width="80px">
          <el-form-item label="所属学科">
            <el-select v-model="editDirectoryInfo.subjectName" placeholder="请选择" class="editSelect">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="editDirectoryInfo.directoryName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEdit">确认</el-button>
        </span>
      </el-dialog>
      <!-- 添加目录对话框 -->
      <el-dialog
        @close="closeAddDirectory"
        title="新增目录"
        :visible.sync="addDialogVisible"
        width="400px">
        <el-form ref="addDirectoryform" :rules="addRules" :model="addDirectoryInfo" label-width="80px">
          <el-form-item label="所属学科" prop="subjectID">
            <el-select v-model="addDirectoryInfo.subjectID" placeholder="请选择" class="editSelect">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="addDirectoryInfo.directoryName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible=false">取消</el-button>
          <el-button type="primary" @click="submitadd">确认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, update, remove, add } from '@/api/hmmm/directorys.js'
import { simple as subjectSimple } from '@/api/hmmm/subjects.js'
import parseTimeByString from '@/filters'
export default {
  data () {
    return {
      queryData: {
        page: 1,
        pagesize: 10
      },
      directoryList: [],
      total: 0,
      options: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      editDialogVisible: false,
      editDirectoryInfo: {},
      subjectList: [],
      editRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      addDialogVisible: false,
      addDirectoryInfo: {
        directoryName: ''
      },
      addRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getDirectorys()
  },
  methods: {
    async getDirectorys () {
      const { data: res } = await list(this.queryData)
      this.directoryList = res.items
      this.total = res.counts
    },
    handleSizeChange (pagesize) {
      this.queryData.pagesize = pagesize
      this.getDirectorys()
    },
    handleCurrentChange (pagenum) {
      this.queryData.page = pagenum
      this.getDirectorys()
    },
    // 清空搜索
    clearClick () {
      this.queryData.directoryName = ''
      this.queryData.state = null
      this.getDirectorys()
    },
    // 启用/禁用
    async isStart (row) {
      // console.log(row)
      row.state = row.state?0:1
      const res = await changeState(row)
      if (res.status !== 200) return this.$message.error('操作失败')
      this.$message.success('操作成功')
    },
    // 渲染对话框中的内容
    async editDirectory (row) {
      this.editDialogVisible = true
      this.editDirectoryInfo = row
      const res = await subjectSimple()
      this.subjectList = res.data
      // console.log(res)
    },
    // 确认修改
    async submitEdit () {
      this.editDialogVisible = false
      const res = await update(this.editDirectoryInfo)
      if (res.status !== 200) return this.$message.error('操作失败')
      this.$message.success('操作成功')
    },
    // 删除目录
    deleteDirectory (row) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 添加目录
    async addDirectory () {
      this.addDialogVisible = true
      const res = await subjectSimple()
      this.subjectList = res.data
    },
    // 确认添加目录
    async submitadd () {
      const res = await add(this.addDirectoryInfo)
      if (res.status !== 200) return this.$message.error('添加目录失败')
      this.$message.success('添加目录成功')
      this.addDialogVisible = false
      this.getDirectorys()
    },
    // 重置表单
    closeAddDirectory () {
      this.$refs.addDirectoryform.resetFields()
    }
  }
}
</script>

<style scoped lang='less'>
.directorys {
  padding: 20px;
  .box-card {
    .dir_right {
      float: right;
    }
    .editSelect {
      width: 280px;
    }
    .el-pagination {
      float: right;
      margin: 20px 0;
    }
  }
}
</style>
